<template>
  <div style=" width: 100%;color: #666;margin: 0;
  padding: 0;">
    <el-container  style="width:1280px;margin: 0 auto;display: block">
      <el-header>
        <span class="title">
          <div>
          <div class="top-head">
            <div class="top-head-line">
              <div>
                <span style="line-height: 20px;
  padding: 3px 0;">
                  <a class="top-bold" href="">登录</a>
                  <span style="line-height: 20px;
  padding: 3px 0;">|</span>
                  <a class="top-bold" href="">免费注册</a>
                  <span style="line-height: 20px;
  padding: 3px 0;">|</span>
                  <a href="" style="font-size: 15px;color: #42b983">个人中心</a>
                </span>
              </div>
            </div>
          </div>
          </div>
          <div class="text" >
            <img class="logo" src="/imgs/ZDlogo.png">
            <svg width="500" height="100">
              <text x="20" y="80" class="text-svg">
                长征租车
              </text>
            </svg>
          </div>
        </span>
        <el-menu class="menu" router>
          <el-menu-item class="text-menu" index="/index" >首页</el-menu-item>
          <el-menu-item class="text-menu" index="/vehicle">自驾租车</el-menu-item>
          <el-menu-item class="text-menu" index="/test">二手车</el-menu-item>
          <el-menu-item class="text-menu" index="4">自驾游</el-menu-item>
          <el-menu-item class="text-menu" index="5">车型查询</el-menu-item>
          <el-menu-item class="text-menu" index="/station">营业网点</el-menu-item>
          <el-menu-item class="text-menu" index="7">精彩活动</el-menu-item>
          <el-menu-item class="text-menu" index="/help">帮助中心</el-menu-item>
          <el-menu-item class="text-menu" index="/xunfei">讯飞</el-menu-item>
        </el-menu>
      </el-header>
      <el-main style="width: 100%;padding: 5vh 0;overflow: hidden;margin: 0 auto;max-height: 200vh;height: 500vh">
        <!--主体部分是可变区域-->
        <router-view />
      </el-main>
      <el-footer  >
        <div>
          <div>
            <div class="advantage" >
              <ul>
                <li class="city">
                  <span>
                    <img src="/imgs/5.png" class="img" >
                  </span>
                  <p>500多座城市</p>
                </li>

                <li class="city" >
                  <span>
                    <img src="/imgs/2.png" class="img" >
                  </span>
                  <p>10000多个服务点</p>
                </li>

                <li class="city">
                  <span>
                    <img src="/imgs/3.png" class="img" >
                  </span>
                  <p>几十种车型</p>
                </li>

                <li class="city">
                  <span> <img src="/imgs/4.png" class="img" ></span>
                  <p>24小时服务</p>
                </li>
              </ul>
          </div>
          </div>
        </div>
        <div style="padding: 35px 48px 150px;border-bottom: 2px solid #ccc;display: flex;margin: 0;justify-content: center " >
          <dl class="dl">
            <dt class="title">新手指南</dt>
            <dd class="dd">
              <a href=""  class="service">注册新用户</a>
            </dd>
            <dd class="dd">
              <a href=""  class="service">预定演示</a>
            </dd>
            <dd class="dd">
              <a href=""  class="service">取消或者修改订单</a>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="title" >租车贴士</dt>
            <dd class="dd">
              <a href=""  class="service">支付方式</a>
            </dd>
            <dd class="dd" >
              <a href=""  class="service">增值服务</a>
            </dd>
            <dd  class="dd">
              <a href=""  class="service">精彩活动</a>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="title">售后服务</dt>
            <dd class="dd">
              <a href=""  class="service">建议专区</a>
            </dd>
          </dl>
          <dl  class="dl">
            <dt class="title">自助服务</dt>
            <dd class="dd">
              <a href=""  class="service">忘记密码？</a>
            </dd>
          </dl>
          <dl class="dl">
            <dt class="title">网站帮助</dt>
            <dd class="dd">
            <a href=""  class="service">长征租车的最新动态</a>
            </dd>
            <dd class="dd">
            <a href=""  class="service">网站帮助</a>
            </dd>
            <dd class="dd">
            <a href="" class="service">联系网站</a>
            </dd>
          </dl>
        </div>
        <div class="web-city">
          <div style="font-size: 20px;color:black;padding-bottom:10px;font-family:'Microsoft YaHei'">北京市热门租车城区推荐</div>
          <span class="web-span"></span>
          <ul class="web-city-car">
            <li class="addr">
              <a ></a>
            </li>
            <li class="addr">
              <a >西城区</a>
            </li>
            <li class="addr">
              <a >大兴区</a>
            </li>
            <li class="addr">
              <a>
                东城区
              </a>
            </li>
            <li class="addr">
              <a >
                顺义区
              </a>
            </li>
            <li class="addr">
              <a >
                朝阳区
              </a>
            </li >
            <li class="addr">
              <a >
                海淀区
              </a>
            </li>
            <li class="addr">
              <a>
                丰台区
              </a>
            </li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style scoped>
.dd{
  padding: 2px 0 0 2px;
  margin: 0;
}
.dl{
  float: left;
  width: 150px;
  padding-right: 15px;
  margin: 0;
}
.service{
  font-family: "Microsoft YaHei";
  font-size: 14px;
  color: #707070;
  text-decoration: none;
  padding: 5px 0;
  display: inline-block;
}
.title{
  font-size: 20px;
  padding-bottom: 5px;
  margin: 0;
}
.img{
  width: 64px;
  height: 50px;
  display: inline-block;
  text-align: center;
  list-style: none;

}
.city{
  width: 292px;
  text-align: center;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.advantage{
  padding: 24px 0;
  border-bottom: 1px solid #ccc;
  margin: 0;
}
.addr{
  float: left;
  width: 120px;
  padding-bottom: 10px;
  margin: 0;
  color:#707070;
}
.web-span{
  background-position: -713px 0;
  width: 14px;
  height: 10px;
  position: absolute;
  right: 52px;
  top: 64px;
  display: inline-block;
  cursor: pointer;
}
.web-city-car{
  height: 86px;
  display: block;
  overflow: hidden;
  clear: both;
  content: "";
  list-style: none;
}
.web-city{
  padding: 22px 48px 16px;
  border-bottom:1px solid #ccc ;
  position: relative;
  margin: 0;
}
.text-menu:hover::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 25%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent  #42b983 transparent;
}
.text-menu:hover{
  color: #42b983;
  background-color: white;
  transition:  0.3s ease, color 0.3s ease;
  opacity: 1;
}
.menu{
  padding: 0;
  margin-left: -26px;
  display: block;
  list-style: none;
  color: #666;

}
.text-menu{
  float: left;
  width: 180px;
  height: 56px;
  text-align: center;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.text-svg{
  font-family: 'Brush Script MT',cursive;
  font-size: 40px;
  fill: red;
  stroke: pink;
  font-weight: bold;
}
.top-bold{
  text-decoration: none;
  color: #23b7b7;
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  padding: 1px 3px 2px;
  display: inline-block;
  border: 2px solid #f2f2f2;
}
.top-head{
  background: #f2f2f2;
  width: 100%;
  height: 28px;
  padding-top: 4px;
  position: relative;
  z-index: 99;
  margin: 0;
}
.top-head-line{
  width: 100%;
  margin: 0 auto;
}
.logo{
  width: 150px;
  height: 100px;
}


</style>
<script setup>

</script>